﻿@model Fap.AspNetCore.ViewModel.JqGridViewModel

<title><fap-multilang lang-key="histroy_employee" default-content="员工历史档案"></fap-multilang>    </title>

<div class="row">
    <div class="col-xs-12">
        <div id="widget-box-orgdept" class="widget-box">
            <div class="widget-header widget-header-flat">
                <h4 class="widget-title">
                    <fap-multilang lang-key="histroy_employee" default-content="员工历史档案"></fap-multilang>
                </h4>
                <div class="widget-toolbar">
                    <a href="#" data-action="fullscreen" class="orange2">
                        <i class="ace-icon fa fa-expand"></i>
                    </a>
                </div>
                <div class="widget-toolbar">
                    <label>
                        <input type="checkbox" id="chkphoto" class="ace" />
                        <span class="lbl">
                            <fap-multilang lang-key="mss_employees_page_photo" default-content="照片"></fap-multilang>
                        </span>
                    </label>
                </div>
                <div class="widget-toolbar form-inline">
                    <fap-multilang lang-key="history_date" default-content="历史时间"></fap-multilang>:
                    <div class="input-group">
                        <input class="form-control date-picker" id="id-date-picker-1" type="text" data-date-format="yyyy-mm-dd" />
                        <span class="input-group-addon">
                            <i class="fa fa-calendar bigger-110"></i>
                        </span>
                    </div>
                    <!-- /section:basics/content.searchbox -->
                </div>

            </div>
            <div class="widget-body">
                <!-- #section:custom/widget-box.toolbox -->
                <div class="widget-main">
                    <fap-grid id="employee" grid-model="Model" oper-import="true"
                              auto-width="true" on-select-row="ShowPhoto(rowid)" multi-box-only="true" multi-select="true" oper-export="true" oper-delete="true" oper-batch-update="true" source-type="Local" shrink-fit="false"></fap-grid>
                </div>
            </div>
        </div>
        <!-- /section:elements.tab -->
        <div id="right-menu" class="modal aside" data-body-scroll="false" data-offset="true" data-placement="right" data-fixed="true" data-backdrop="invisible" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header no-padding">
                        <div class="table-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                <span class="white">&times;</span>
                            </button>
                            <fap-multilang lang-key="department" default-content="部门"></fap-multilang>
                        </div>
                    </div>

                    <div class="modal-body">
                        <div id="treeDeptDiv" class="widget-main ">
                            <div class="scrollable">
                                <fap-tree id="orgdept" is-async="false"></fap-tree>
                            </div>
                        </div>
                    </div>
                </div><!-- /.modal-content -->

                <button class="aside-trigger btn btn-purple btn-app btn-xs ace-settings-btn" data-target="#right-menu" data-toggle="modal" type="button">
                    <i data-icon1="fa-sitemap" data-icon2="fa-minus" class="ace-icon fa fa-sitemap bigger-110 icon-only"></i>
                </button>
            </div><!-- /.modal-dialog -->
        </div>
    </div>
</div>
<script>
    var scripts = [null,"/Scripts/Employee/EmpIndex.js?v=1", null];
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
        jQuery(function ($) {
            $('.modal.aside').ace_aside();
            $(document).one('ajaxloadstart.page', function (e) {
                $('#tree-orgdept').jstree("destroy");
                $('.modal.aside').remove();
                $(window).off('.aside');
            });
            $('.date-picker').datepicker({
                autoclose: true,
                todayHighlight: true
            }).on("change", function () {
                $('#tree-orgdept').jstree('destroy', false);
                $('#tree-orgdept').jstree({
                    'core': {
                        "check_callback": true,
                        'force_text': true,
                        "themes": { "stripes": true },
                        'data': {
                            'url': basePath + '/Organization/Api/OrgDept/History/' + $(this).val(),
                            'dataType': 'json', // needed only if you do not supply JSON headers
                            'data': function (node) { return { 'id': node.id }; }
                        },
                    }
                }).bind('changed.jstree', function (e, data) {
                    if (data && data.selected && data.selected.length) {
                        var deptid = data.selected[0];
                        var deptMC = data.node.text;
                        //获取所有子Fid
                        var childs = data.node.children_d;
                        var selids = childs.concat(deptid);
                        var treeDept = $('#tree-orgdept').jstree(true);
                        //过滤可操作部门
                        var sels = $.grep(selids, function (d, i) {
                            debugger
                            return treeDept.get_node(d).data.selectable == true;

                        });
                        //var filter = '{"groupOp":"AND","rules":[{"field":"DeptUid","op":"in","data":"' + childs + '"}]}'
                        var filter = { "groupOp": "AND" };
                        var rules = [];
                        rules.push({ "field": "DeptUid", "op": "in", "data": sels.join(',') });
                       
                        filter.rules = rules;

                        $("#grid-employee").jqGrid('setGridParam', {
                            datatype: 'json',
                            postData: { filters: JSON.stringify(filter), timePoint: $('.date-picker').val() }, //发送数据
                            page: 1
                        }).trigger("reloadGrid"); //重新载入
                    }

                });

            })
                //show datepicker when clicking on the icon
                .next().on(ace.click_event, function () {
                    $(this).prev().focus();
                });

        });
    });
</script>